<template>
  <div class="user">
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-input @keydown.native.enter="initList" placeholder="请输入内容" v-model="query" class="search-input input-with-select">
            <el-button @click="initList" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type = 'index'
          prop="date"
          label="#"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户状态"
          width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="value2"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="操作">
          <template slot-scope="scope">
          <el-button type="primary" plain size="mini" icon="el-icon-edit"></el-button>
          <el-button type="danger" plain size="mini" icon="el-icon-share"></el-button>
          <el-button type="warning" plain size="mini" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark el-breadcrumb" style="padding-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { getUserList } from '../api/index.js'
  export default {
    methods: {
      handleSizeChange(val) {
          this.pagesize = val;
        let params = {
          params: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize
          }
        }
        getUserList(params).then((res)=>{
          console.log(res);
          this.tableData = res.data.users
        })
      },
      handleCurrentChange(val) {
        this.pagenum = val;
        console.log(this.pagenum)
        let params = {
          params: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize
          }
        }
        getUserList(params).then((res)=>{
          console.log(res);
          this.tableData = res.data.users
        })
      },
      initList(){
        console.log(this.query);
        let params = {
          params: {
            query: this.query,
            pagenum: 1,
            pagesize: this.pagesize
          }
        }
        getUserList(params).then((res)=>{
          console.log(res);
          this.tableData = res.data.users
        })
      }
    },
    mounted(){
        //和window.onload作用有点像，就是当元素全部渲染加载好
      let params = {
        params: {
          query: '',
          pagenum:1,
          pagesize:this.pagesize
        }
      }
      getUserList(params).then((res)=>{
        console.log(res);
        this.tableData = res.data.users
      })
    },
    data() {
      return {
          value2:true,
          pagenum:1,
        pagesize:1,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        query:'',
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      };
    }
  }
</script>
<style lang="scss" scoped>
  .user {
  .margin-20 {
    margin: 20px 0;
  }
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
  }
</style>
